import 'package:flutter/material.dart';

class MyGridViewTwo extends StatelessWidget {
  const MyGridViewTwo({super.key});
  @override
  Widget build(BuildContext context) {
    // gridView.extent 是按最大宽度来布局的
    return GridView.extent(
      maxCrossAxisExtent: 100,
      mainAxisSpacing: 10,
      crossAxisSpacing: 10,
      childAspectRatio: 4 / 3,
      children: List.generate(12, (index) {
        return Container(
          color: Colors.red,
        );
      }),
    );
    // gridView.count 是按固定列数来布局的
    // return GridView.count(
    //   // 固定列数
    //   crossAxisCount: 2,
    //   mainAxisSpacing: 10,
    //   crossAxisSpacing: 10,
    //   childAspectRatio: 4 / 3,
    //   children: List.generate(12, (index) {
    //     return Container(
    //       color: Colors.blue,
    //     );
    //   }),
    // );
  }

  // @override
  // Widget build(BuildContext context) {
  //   return GridView.builder(
  //       itemCount: 12,
  //       // 最大宽度
  //       gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
  //         maxCrossAxisExtent: 130,
  //         mainAxisSpacing: 10,
  //         crossAxisSpacing: 10,
  //         childAspectRatio: 4 / 3,
  //       ),
  //       // 固定列数
  //       // gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
  //       //   crossAxisCount: 2,
  //       //   mainAxisSpacing: 10,
  //       //   crossAxisSpacing: 10,
  //       //   childAspectRatio: 4 / 3,
  //       // ),
  //       itemBuilder: (context, index) {
  //         return Container(
  //           color: Colors.blue,
  //         );
  //       });
  // }
}
